<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style>
        .pageNext{page-break-after: always;}
        body {
            font-family: SimHei;
        }

        @page {
            size: 10in 20in;
            margin: 0.25in;
            -fs-flow-top: "header";
            -fs-flow-bottom: "footer";
            -fs-flow-left: "left";
            -fs-flow-right: "right";
            border: thin solid black;
            padding: 1em;
        }
        #header {
            position: absolute; top: 0; left: 0;
            -fs-move-to-flow: "header";
        }
        #footer {
            font-size: 90%; font-style: italic;
            position: absolute; top: 0; left: 0;
            -fs-move-to-flow: "footer";
        }
        #pagenumber:before {
            content: counter(page);
        }
        #pagecount:before {content: counter(pages);
        }
    </style>
</head>
<body>
<div class="pdf-page-range">
    <h1>你好，[[${name}]]</h1>
    <img src="" width="500px" height="500px"/>
    <h3>我们或是忐忑</h3>
    <h3>或是不屑缘分的遗失</h3>
    <h3>但满是蜿蜒后不见得笔直</h3>
    <h3>我们或是后悔</h3>
    <h3>或是放任自己的固执</h3>
    <h3>但满是伤痕后不见得踏实</h3>
    <h3>谁能坦然挥别过往的愚蠢</h3>
    <h3>在只剩明天之前</h3>
    <h3>谁不借口时间 挥霍和颓废</h3>
    <h3>在只剩昨日之前</h3>
    <h3>我们或是忐忑</h3>
    <h3>或是不屑缘分的遗失</h3>
    <h3>但满是蜿蜒后不见得笔直</h3>
   <img src="https://t7.baidu.com/it/u=1883046674,3753982005&fm=193&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1645751797&t=11efb3b1fab21036d7812dcf8e1bc32c" width="500px" height="500px"/>




</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
    $(function () {
//后端低版本的itext对分页的处理非常不友好，所以前端页面强制分页。//我将需要显示的元素都添加class= ‘pdf-page-range’//class='pageNext'   .pageNext{page-break-after: always;}  这个css表示下一个元素将会换页。
        function pdfPageRange(){
            var heigth= 0;
            $(".pdf-page-range").each(function(){
                var $this = $(this);
                var $table = $this.find('table');
                var $next = $this.next();
                var $prevPage = $this.prev('.pageNext');
                index = $(".pageNext").length;
                var tagName = $this[0].tagName;
                var element_tag;
                if($table&&$table.length>0){
                    element_tag = $table[0];
                }
                if(tagName=='table'||tagName=='TABLE'){
                    element_tag = $this[0];
                }
                if(element_tag){
                    heigth = tablePage($(element_tag),heigth)
                    return true;
                }

                //不是table的处理
                heigth +=  $this[0].offsetHeight;
                if(heigth>1000){
                    $this.before("<div class='pageNext' ></div> ");
                    heigth = $this[0].offsetHeight;
                }
            });
        }

        //table单独算高度
        function tablePage($table,heigth){
            var $trList = $table.find('tr');
            var $thead = $table.find('tr.thead');
            $trList.each(function(){
                heigth += $(this)[0].offsetHeight;
                if(heigth>1000){
                    $(this).before($thead.prop("outerHTML"));
                    $thead_add = $(this).prev().prev();
                    $thead_add.addClass('pageNext');
                    heigth = $(this)[0].offsetHeight+$thead_add[0].offsetHeight;
                }
            });
            return heigth;
        }
    });


</script>
</body>
</html>